<template>
  <div class="body">
    <!-- 嫌疑人信息 -->
    <div class="criminal_msg">
      <div class="title_box">
        <p class="text">嫌疑人信息</p>
        <el-dropdown
          placement="bottom-end"
          @visible-change="openButton"
          style="margin-left: 12px"
          trigger="click"
        >
          <el-button type="primary">
            更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu :split-button="false">
              <el-dropdown-item
                @click="downClick(1, bailInfo.id, bailInfo.bail_id)"
                v-if="anniuStatus.apply_bail_delay"
                divided
                >延期申请</el-dropdown-item
              >
              <el-dropdown-item
                @click="downClick(2, bailInfo.id, bailInfo.bail_id)"
                v-if="anniuStatus.update_origin_attr"
                divided
                >更新原始凭证</el-dropdown-item
              >
              <el-dropdown-item
                @click="downClick(4, bailInfo.id, bailInfo.bail_id)"
                v-if="anniuStatus.save_bail_date"
                divided
                >修改办案日期</el-dropdown-item
              >
              <el-dropdown-item
                @click="downClick(5, bailInfo.id, bailInfo.bail_id)"
                v-if="anniuStatus.entrust"
                divided
                >委托协办单位</el-dropdown-item
              >
              <el-dropdown-item
                @click="downClick(6, bailInfo.id, bailInfo.bail_id)"
                v-if="anniuStatus.save_bail_bank"
                divided
                >修改办案预留银行卡</el-dropdown-item
              >
              <el-dropdown-item
                @click="downClick(7, bailInfo.id, bailInfo.bail_id)"
                v-if="anniuStatus.update_department"
                divided
                >修改办案单位</el-dropdown-item
              >
              <el-dropdown-item
                @click="downClick(8, bailInfo.id, bailInfo.bail_id)"
                v-if="anniuStatus.save_bail_police"
                divided
                >修改办案人</el-dropdown-item
              >
              <el-dropdown-item
                @click="downClick(9, bailInfo.id, bailInfo.bail_id)"
                v-if="anniuStatus.save_crime_info"
                divided
                >完善当事人信息</el-dropdown-item
              >
              <el-dropdown-item
                @click="downClick(10, bailInfo.id, bailInfo.bail_id)"
                v-if="anniuStatus.revoke_qrcode"
                divided
                >撤销缴费申请</el-dropdown-item
              >
              <el-dropdown-item
                @click="downClick(3, bailInfo.id, bailInfo.bail_id)"
                v-if="anniuStatus.close_bail"
                divided
              >
                <el-button style="width: 100%" type="primary"
                  >关闭本案</el-button
                >
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div class="msg">
        <div>
          <p class="title">嫌疑人</p>
          <p class="text">{{ bailInfo.bail.crime_name }}</p>
        </div>
        <div>
          <p class="title">身份证号</p>
          <p class="text">{{ bailInfo.bail.crime_idcard }}</p>
        </div>
        <div>
          <p class="title">出生日期</p>
          <p class="text">{{bailInfo.bail.crime_date?bailInfo.bail.crime_date:'--'}}</p>
        </div>
        <div>
          <p class="title">家庭住址</p>
          <p class="text">{{ bailInfo.bail.crime_address }}</p>
        </div>
      </div>
    </div>

    <!-- 案件信息 -->
    <div class="aj_msg">
      <p class="title_box">案件信息</p>
      <div class="msg">
        <div class="border">
          <p class="title">案件编号</p>
          <p class="text">{{ bailInfo.bail.case_code }}</p>
          <!-- <p class="label">多个10人</p> -->
        </div>
        <div>
          <p class="title">案件名称</p>
          <p class="text">{{ bailInfo.bail.case_title }}</p>
        </div>
        <div>
          <p class="title">办案单位</p>
          <p class="text">{{ bailInfo.department.name }}</p>
          <!-- <el-button
            @click="isWtShow = true"
            style="margin-left: 10px"
            size="mini"
            type="primary"
            >委托</el-button
          > -->
        </div>
        <div class="border">
          <p class="title">执行机构</p>
          <p class="text">重庆市江津区字市派出所</p>
        </div>
        <div>
          <p class="title">办案人员</p>
          <p class="text">{{ bailInfo.baar_xm }}</p>
        </div>
        <div>
          <p class="title">办案人手机号</p>
          <p class="text">{{ bailInfo.bamj_mobile }}</p>
        </div>
        <div>
          <p class="time">
            起算日期 {{ bailInfo.bail.start_date }} 至 结算日期
            {{ bailInfo.bail.end_date }}
          </p>
        </div>
      </div>
    </div>

    <!-- 执行取保候审 -->
    <div class="book_msg">
      <div class="tt">
        <p class="title_box">执行取保候审</p>
        <el-button icon="Plus" size="mini" type="primary" @click="fileVisible = true"
          >上传文件</el-button
        >
      </div>
      <div class="msg">

        <div v-if="!isFileArr">
          <div class="img">
            <img class="up_img" src="@/assets/updata.png" alt="" />
            <p @click="oneDel"><el-icon size="18"><Delete /></el-icon></p>
          </div>
          <div class="up_msg">
            <p class="name">{{bailInfo.qbhsjds.bzj_daw_jyqk}}</p>
            <p class="text">{{bailInfo.qbhsjds.qbhs_wsbh}}</p>
            <p class="time">{{bailInfo.qbhsjds.createtime}}</p>
          </div>
        </div>
        <div v-else v-for="(item,index) in fileArr" :key="index">
          <div class="img" v-if="item.imagetype == 'pdf'">
            <svg-icon  name="pdf" color="red" width="100px" height="120px"></svg-icon>
            <p @click="del(index)"><el-icon size="18"><Delete /></el-icon></p>
          </div>

          <div class="img" v-if="item.imagetype == 'png'">
            <el-image 
            style="width: 100px; height: 120px;border-radius: 10px;"
            :src="item.url_new" 
            :preview-src-list="[item.url_new]"/>
            <p @click="del(index)"><el-icon size="18"><Delete /></el-icon></p>
          </div>
          <div class="up_msg">
            <p class="name">{{item.filename_alias?item.filename_alias:item.filename}}</p>
            <!-- <p class="text">渝公江北（经）取保字【2024】4号</p> -->
            <p class="time">{{item.uploadtime_text}}</p>
          </div>
        </div>

        
        
        
        <!-- <el-upload
          ref="upload"
          list-type="picture-card"
          action
          :file-list="fileList"
          :show-file-list="true"
          multiple
          accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
          :limit="5"
        >
          <img class="up_img" src="@/assets/updata.png" alt="" />
          <div class="up_msg">
            <p class="name">取保候审决定书</p>
            <p class="text">渝公江北（经）取保字【2024】4号</p>
            <p class="time">2024-01-11</p>
          </div>
        </el-upload> -->
        <!-- <file-upload
          ref="uploadRef"
          :bailId="bailInfo.bail_id"
          :disabled="false"
          :accept="'.pdf,.png'"
          :groupId="2"
          :limit="3"
          :fileList="fileList"
          @update:file-list="handleUpdateFileList"
          @success="handleSuccess"
        /> -->
      </div>
    </div>

    <!-- 加文件 -->
    <el-dialog width="65%" title="" v-model="fileVisible" >
      <update-file @submitFile="changeFileArr" @closeDrawer="closeFileVisible" :bailId="bailInfo.bail_id" :groupId="2"></update-file>
    </el-dialog>

    <!-- 缴费金额 -->
    <div class="price">
      <p class="text">缴费金额：</p>
      <p class="num">{{ bailInfo.amount_alias }}</p>
    </div>

    <!-- 委托弹窗 -->
    <el-dialog
      v-model="isWtShow"
      :append-to-body="true"
      :show-close="false"
      width="800px"
    >
      <!-- 顶部背景 -->
      <div class="head_line">
        <p class="line"></p>
        <p class="bj"></p>
      </div>
      <div class="foot_btn">
        <el-button @click="isWtShow = false">取消</el-button>
        <el-button type="primary" :loading="nextLoading" @click="nextStep"
          >提交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch, ref, onMounted } from "vue";
import { defineProps, defineEmits,defineExpose } from "vue";

import { getPlayMore, getBailInfo } from "@/api/bond/pay";
import { getBindAtt } from "@/api/public";

const props = defineProps({
  bailId: {
    type: Number,
  },
  bailInfo: {
    type: Object,
  },
});

const emit = defineEmits(["anniuNum"]);
onMounted(() => {
  console.log(props.bailInfo);
  getFile()
});

let isWtShow = ref(false);


let anniuStatus = ref({});
const openButton = async (scope: any) => {
  console.log("iiii");
  getPlayMore({ process_id: props.bailInfo.id }).then((res) => {
    if (res.code == 1) {
      anniuStatus.value = res.data;
    }
  });
};

// 获取上传文件
let isFileArr = ref(false)
const getFile = async () => {
  let data = {
    bail_id: props.bailInfo.bail_id,
    group_id:2
  }
  await getBindAtt(data).then((res) => {
    if (res.code == 1) {
      if(res.data.length){
        isFileArr.value = true
        res.data.map((item: {url_new: any; url: any; })=>{
          item.url_new = import.meta.env.VITE_APP_file_API+item.url
        })
        fileArr.value = res.data
        console.log(fileArr.value)
      }else{
        isFileArr.value = false
      }
    }
  });
};


// 按钮点击
const downClick = (num: any,id: any,bail_id: any) => {
  console.log(num,id,bail_id)
  emit("anniuNum", {num,id,bail_id});
};

// 获取文件
let fileVisible = ref(false)
const closeFileVisible = ()=>{
  fileVisible.value = false
}
let fileArr = ref([])
const changeFileArr = (arr:any)=>{
  fileVisible.value = false
  console.log(arr)
  fileArr.value = arr
}

// 删除文件
const del = (index:any)=>{
  fileArr.value.splice(index,1)
}

// 删除默认文件
const oneDel = (index:any)=>{
  props.bailInfo.qbhsjds.bzj_daw_jyqk = ''
}

defineExpose({
  fileArr
})
</script>

<style lang="scss" scoped>
.foot_btn {
  text-align: center;
  width: 100%;
  padding: 50px 0;
}
.head_line {
  .line {
    width: 100%;
    height: 8px;
    background: #1c55d1;
  }
  .bj {
    height: 46px;
    background: linear-gradient(
      180deg,
      rgba(0, 80, 255, 0.25) 0%,
      rgba(0, 80, 255, 0.1314) 20%,
      rgba(0, 80, 255, 0.0508) 59%,
      rgba(28, 85, 209, 0) 87%
    );
  }
}
.title_box {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
.criminal_msg {
  margin: 0 30px;
  margin-bottom: 32px;
  .msg {
    background: #f8f8f8;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 10px 20px;
    div {
      display: flex;
      font-size: 14px;
      color: #333333;
      line-height: 42px;
      .title {
        width: 100px;
        color: #666666;
      }
    }
  }
}
.aj_msg {
  margin: 0 30px;
  .msg {
    background: #f8f8f8;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 6px 20px;
    div {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #333333;
      line-height: 48px;
      .title {
        width: 100px;
        color: #666666;
      }
      .label {
        padding: 0 8px;
        height: 20px;
        line-height: 20px;
        background: #0046df;
        font-size: 12px;
        color: #fff;
        margin-left: 16px;
      }
      &.border {
        border-bottom: 1px solid #d8d8d8;
      }
      .time {
        padding: 0 20px;
        height: 32px;
        line-height: 32px;
        border-radius: 4px;
        background: #eef3ff;
        border: 1px solid #0046df;
        font-size: 14px;
        color: #0046df;
        margin: 10px 0 20px 0;
      }
    }
  }
}
.book_msg {
  margin: 0 30px;
  margin-top: 32px;
  & > .tt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    .title_box {
      margin-bottom: 0;
    }
  }
  .msg {
    background: #f8f8f8;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 20px 20px;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    &>div{
      display: flex;
    }
    .img{
      position: relative;
      border-radius: 10px;
      overflow: hidden;
      p{
        position: absolute;
        bottom:2px;
        right: 0;
        font-size:12px;
        width: 100%;
        height: 26px;
        background: #1F2E54;
        color:#fff;
        cursor: pointer;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .up_img {
      width: 100px;
      height: 120px;
    }
    .up_msg {
      line-height: 30px;
      text-align: left;
      margin-left: 12px;
      display: flex;
      flex-direction:column;
      justify-content: space-between;
      .name {
        color: #333333;
        font-size: 15px;
        font-weight: 500;
      }
      .text {
        font-size: 14px;
        color: #0046df;
        text-decoration: underline;
        cursor: pointer;
      }
      .time {
        color: #666666;
        font-size: 14px;
      }
    }
  }
  ::v-deep .el-upload--picture-card {
    border: none;
    background: none;
    display: flex;
    align-items: center;
    justify-content: left;
    width: 320px;
  }
}
.price {
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: right;
  margin: 40px 50px 0 0;
  .text {
    font-size: 14px;
    color: #666666;
  }
  .num {
    font-size: 26px;
    font-weight: 500;
    color: #f64040;
    margin-left: 20px;
  }
}


</style>
